<template>
  <div class="join-result-overview">
    <div class="node-name result-overview">
      <span class="overview-type"></span>
      <div class="overview-bars">
        <div class="node-name">{{ leftNodeName }}</div>
      </div>
      <div class="overview-bars">
        <div class="node-name">{{ rightNodeName }}</div>
      </div>
    </div>
    <!-- 包括 -->
    <div class="including result-overview">
      <span class="overview-type">已包括</span>
      <!-- 左节点 -->
      <div class="overview-bars">
        <!-- left 匹配  -->
        <popover-result
          v-if="leftRightMatchStatus"
          :text="'已匹配的行'"
          :count="result.leftMatch"
        >
          <span
            class="result-type-bar"
            :class="{ 'check-view': currentView === result.leftMatchView }"
            :style="{
              'background-color': leftColor,
              width: `${leftMatchAccounted}%`,
              'border-color': leftDarkBorderColor,
            }"
            @click="selectResultView(result.leftMatchView)"
          ></span>
        </popover-result>
        <!-- left 未匹配  -->
        <popover-result
          v-if="leftNotMatchStatus"
          :text="'未匹配的行'"
          :count="result.leftNotMatch"
        >
          <span
            class="result-type-bar"
            :class="{ 'check-view': currentView === result.leftNotMatchView }"
            :style="{
              'background-color': leftLightColor,
              width: `${100 - leftMatchAccounted}%`,
              'border-color': leftDarkBorderColor,
            }"
            @click="selectResultView(result.leftNotMatchView)"
          ></span>
        </popover-result>
      </div>
      <!-- 右节点 -->
      <div class="overview-bars">
        <!-- right 匹配 -->
        <popover-result
          v-if="leftRightMatchStatus"
          :text="'已匹配的行'"
          :count="result.rightMatch"
        >
          <span
            class="result-type-bar"
            :class="{ 'check-view': currentView === result.rightMatchView }"
            :style="{
              'background-color': rightColor,
              width: `${rightMatchAccounted}%`,
              'border-color': rightDarkBorderColor,
            }"
            @click="selectResultView(result.rightMatchView)"
          ></span>
        </popover-result>
        <!-- right 未匹配  -->
        <popover-result
          v-if="rightNotMatchStatus"
          :text="'未匹配的行'"
          :count="result.rightNotMatch"
        >
          <span
            class="result-type-bar"
            :class="{ 'check-view': currentView === result.rightNotMatchView }"
            :style="{
              'background-color': rightLightColor,
              width: `${100 - rightMatchAccounted}%`,
              'border-color': rightDarkBorderColor,
            }"
            @click="selectResultView(result.rightNotMatchView)"
          ></span>
        </popover-result>
      </div>
    </div>
    <!-- 排除 -->
    <div class="ruled-out result-overview">
      <span class="overview-type">已排除</span>
      <!-- 左节点 -->
      <div class="overview-bars">
        <popover-result
          v-if="!leftRightMatchStatus"
          :text="'已匹配的行'"
          :count="result.leftMatch"
        >
          <span
            class="result-type-bar"
            :class="{ 'check-view': currentView === result.leftMatchView }"
            :style="{
              'background-color': leftColor,
              width: `${leftMatchAccounted}%`,
              'border-color': leftDarkBorderColor,
            }"
            @click="selectResultView(result.leftMatchView)"
          ></span>
        </popover-result>
        <popover-result
          v-if="!leftNotMatchStatus"
          :text="'未匹配的行'"
          :count="result.leftNotMatch"
        >
          <span
            class="result-type-bar"
            :class="{ 'check-view': currentView === result.leftNotMatchView }"
            :style="{
              'background-color': leftLightColor,
              width: `${100 - leftMatchAccounted}%`,
              'border-color': leftDarkBorderColor,
            }"
            @click="selectResultView(result.leftNotMatchView)"
          ></span>
        </popover-result>
      </div>
      <!-- 右节点 -->
      <div class="overview-bars">
        <!-- right 匹配 -->
        <popover-result
          v-if="!leftRightMatchStatus"
          :text="'已匹配的行'"
          :count="result.rightMatch"
        >
          <span
            class="result-type-bar"
            :class="{ 'check-view': currentView === result.rightMatchView }"
            :style="{
              'background-color': rightColor,
              width: `${rightMatchAccounted}%`,
              'border-color': rightDarkBorderColor,
            }"
            @click="selectResultView(result.rightMatchView)"
          ></span>
        </popover-result>
        <popover-result
          v-if="!rightNotMatchStatus"
          :text="'未匹配的行'"
          :count="result.rightNotMatch"
        >
          <span
            class="result-type-bar"
            :class="{ 'check-view': currentView === result.rightNotMatchView }"
            :style="{
              'background-color': rightLightColor,
              width: `${100 - rightMatchAccounted}%`,
              'border-color': rightDarkBorderColor,
            }"
            @click="selectResultView(result.rightNotMatchView)"
          ></span>
        </popover-result>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
/**
 * 结果概览, 其中单个表模块 是 popover
 */
import { Vue, Component, Prop } from 'vue-property-decorator'
import PopoverResult from '@/components/studio/data/set-params/auto-join/PopoverResult.vue'
import { OverviewResult } from '@/components/studio/data/set-params/auto-join/interface-auto-join'
import DataStore from '@/store/modules/dataview'

@Component({
  components: {
    PopoverResult,
  },
})
export default class ResultOverview extends Vue {
  @Prop({ type: Array, default: () => [] }) joinClauseList!: any[] // 字段推荐
  @Prop({ type: Number, default: 3 }) joinType!: number // 联接类型
  @Prop({ type: String, default: '#757070' }) leftColor!: string
  @Prop({ type: String, default: '#757070' }) rightColor!: string
  @Prop({ type: String, default: '左节点' }) leftNodeName!: string
  @Prop({ type: String, default: '右节点' }) rightNodeName!: string
  @Prop({ type: Object, default: () => null }) result!: OverviewResult | null

  public currentView: string | null = null // 当前选择的表

  private leftLightColor: string | null = null // 左表浅色
  private leftDarkBorderColor: string | null = null // 左表加深边框
  private rightLightColor: string | null = null // 右表浅色
  private rightDarkBorderColor: string | null = null // 右表加深边框
  public beforeMount() {
    this.leftLightColor = this.getLightColor(this.leftColor, 0.5)
    this.rightLightColor = this.getLightColor(this.rightColor, 0.5)
    this.leftDarkBorderColor = this.getDarkColor(this.leftColor, 0.2)
    this.rightDarkBorderColor = this.getDarkColor(this.rightColor, 0.2)
  }

  /**
   * 左表 右表 匹配部分的状态
   */
  public get leftRightMatchStatus(): boolean {
    return [1, 2, 3, 4].includes(this.joinType)
  }

  /**
   * 左表 未匹配部分的状态
   */
  public get leftNotMatchStatus(): boolean {
    return [1, 4, 5, 7].includes(this.joinType)
  }

  /**
   * 右表 未匹配部分的状态
   */
  public get rightNotMatchStatus(): boolean {
    return [2, 4, 6, 7].includes(this.joinType)
  }

  // 左表 match 占比
  public get leftMatchAccounted() {
    const decimal: any = this.result
      ? (
          this.result.leftMatch /
          (this.result.leftMatch + this.result.leftNotMatch)
        ).toFixed(2)
      : 0
    const proportion = Number(decimal * 100)
    if (proportion === 100 || proportion === 0) {
      return proportion
    }
    return this.limitProportions(proportion)
  }
  // 右表 match 占比
  public get rightMatchAccounted() {
    const decimal: any = this.result
      ? (
          this.result.rightMatch /
          (this.result.rightMatch + this.result.rightNotMatch)
        ).toFixed(2)
      : 0
    const proportion = Number(decimal * 100)
    if (proportion === 100 || proportion === 0) {
      return proportion
    }
    return this.limitProportions(proportion)
  }

  // 限制占比范围 10 - 90 (%)
  public limitProportions(proportion: number) {
    return Math.max(10, Math.min(proportion, 90))
  }

  // 选择 结果概览
  public selectResultView(view: string) {
    this.currentView = this.currentView !== view ? view : null
    DataStore.resetTableColumn() // 重置数据，防止后续获取预览数据接口触发不正常
    DataStore.setAutojoinPreview(this.currentView)
  }

  // hex颜色转rgb颜色
  public HexToRgb(color: string) {
    color = color.replace('#', '') // replace替换查找的到的字符串
    const hxs: any = color.match(/../g) // match得到查询数组
    for (let i = 0; i < 3; i += 1) {
      hxs[i] = Number.parseInt(hxs[i], 16)
    }
    return hxs
  }
  // GRB颜色转Hex颜色
  public RgbToHex(a: number, b: number, c: number) {
    const hexes = [a.toString(16), b.toString(16), c.toString(16)]
    for (let i = 0; i < 3; i += 1) {
      if (hexes[i].length === 1) {
        hexes[i] = `0${hexes[i]}`
      }
    }
    return `#${hexes.join('')}`
  }
  // 得到hex颜色值为color的加深颜色值，level为加深的程度，限0-1之间
  public getDarkColor(color: string, level: number) {
    const rgba = this.HexToRgb(color)
    for (let i = 0; i < 3; i += 1) {
      rgba[i] = Math.floor(rgba[i] * (1 - level)) // floor 向下取整
    }
    return this.RgbToHex(rgba[0], rgba[1], rgba[2])
  }
  // 得到hex颜色值为color的减淡颜色值，level为加深的程度，限0-1之间
  public getLightColor(color: string, level: number) {
    const rgba = this.HexToRgb(color)
    for (let i = 0; i < 3; i += 1) {
      rgba[i] = Math.floor((255 - rgba[i]) * level + rgba[i])
    }
    return this.RgbToHex(rgba[0], rgba[1], rgba[2])
  }
}
</script>

<style lang="less" scoped>
// 结果概览
.join-result-overview {
  height: 96px;
  width: 100%;

  .result-overview {
    display: flex;
    height: 28px;
    justify-content: space-between;
    margin-bottom: 6px;
    width: 100%;

    // 已排除 已包括 type
    .overview-type {
      height: 28px;
      line-height: 28px;
      text-align: left;
      width: 60px;
    }

    // 两个node name - 两个已包括 - 两个已排除
    .overview-bars {
      height: 28px;
      line-height: 28px;
      width: calc(50% - 33px);

      .node-name {
        overflow: hidden;
        text-align: center;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
      }

      // 6 块
      .result-type-bar {
        cursor: pointer;
        display: inline-block;
        height: 28px;
      }
    }

    // 选中边框
    .check-view {
      border-style: solid;
      border-width: 3px;
    }
  }
}
</style>
